{% extends "base.html" %}
{% block title%}Report-generator{% endblock %}
{% block main %}
<div class="container align-content-between" style="top: 30%;height: 80%;">
    <div class="row" style="height: 90%">
        <div class="col col-4">
            <div class="h2 offset-3" style="height: 10%">生成选项</div>
            <div class="row" style="height: 10%">
                <a id="basic-option" class="btn col-6 text-decoration-underline" style="font-size: 20px">基础选项：</a>
                <a id="advanced-option" class="btn col-6" style="font-size: 20px">高级选项：</a>
            </div>

            <div id="reportForm" class="form mb-3">
                <div class="input-group mb-3">
                    <label for="title" class="input-group-text col-4">&nbsp;标&nbsp;题：&nbsp;</label>
                    <input type="text" id="title" class="form-control">
                </div>

                <div class="input-group mb-3">
                    <label for="class" class="input-group-text col-4">&nbsp;班&nbsp;级：&nbsp;</label>
                    <input type="text" id="class" class="form-control">
                </div>

                <div class="input-group mb-3">
                    <label for="author" class="input-group-text col-4">&nbsp;作&nbsp;者：&nbsp;</label>
                    <input type="text" id="author" class="form-control">
                </div>

                <div class="input-group mb-3">
                    <label for="number" class="input-group-text col-4">&nbsp;学&nbsp;号：&nbsp;</label>
                    <input type="text" id="number" class="form-control">
                </div>

                <div class="input-group mb-3">
                    <label for="directory" class="input-group-text col-4">&nbsp;位&nbsp;置：&nbsp;</label>
                    <input type="text" id="directory" class="form-control">
                </div>

                <div class="input-group mb-3">
                    <label for="language" class="input-group-text col-4">&nbsp;预览语言：</label>
                    <select name="" id="language" class="form-select">
                        <option value="c">C</option>
                        <option value="cpp">C++</option>
                        <option value="cs">C#</option>
                        <option value="java">Java</option>
                        <option value="py">Python</option>
                    </select>
                </div>
                <input id="submit" type="submit" class="form-control" value="生成实验报告">
            </div>
        </div>
        <div class="col">
            <div class="h2">预览效果</div>
            <!-- 这里是的预览代码的界面 -->
            <iframe id="example" src="{{ url_for('page.example_page', name='c.html') }}"
                    style="height: 90%; width: 100%; border: 1px solid black; overflow: scroll">
            </iframe>
        </div>
    </div>
</div>
{% endblock %}
{% block script %}
<script>
    // 高级设置的选项暂时没有
    $("#advanced-option").click(() => {
        alert("暂不支持高级选项功能，敬请期待！");
    });

    // 根据选择的编程语言动态地选择预览的页面
    $("#language").change(() => {
        let language = $("#language").val();
        $("#example").attr("src", "./examples/" + language + ".html")
    });

    // 提交数据，生成实验报告
    $("#submit").click(() => {
        // 获取表单中的数据
        let formData = {};
        formData["title"] = $("#title").val();
        formData["class"] = $("#class").val();
        formData["author"] = $("#author").val();
        formData["number"] = $("#number").val();
        formData["dest"] = $("#directory").val();

        // 对数据进行校验
        for (let key in formData) {
            if (formData[key].length === 0) {
                alert(key.toString() + "的值为空，请重新填写")
                return;
            }
        }

        // 使用ajax发送数据
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "{{ url_for('rest.generate_report') }}",
            data: {
                "title": formData["title"],
                "meta": formData["class"] + " " + formData["author"] + " " + formData["number"],
                "dest": formData["dest"]
            },
            success: (result) => {
                console.log("success");
                if (result["code"] === "00000") {
                    alert("OK");
                    window.location.href = "/result";
                } else {
                    alert(result["message"]);
                }
            },
            error: (result) => {
                alert(result);
            }
        });
    });
</script>
{% endblock %}